<template>
  <div v-loading="listLoading" element-loading-text="Loading">
    <el-form ref="dataFrom" :model="dataFrom" label-width="50px" :rules="rules">
      <el-form-item prop="resource">
        <el-checkbox-group v-model="dataFrom.resource">
          <el-row v-for="(m, k) in menu" :key="k">
            <el-col :span="6">
              <el-checkbox
                :label="m.me_id"
                :value="m.me_id"
                @change="handleCheckAllChange($event, m.me_id)"
                >{{ m.me_name }}
              </el-checkbox>
            </el-col>
            <el-col :span="18" v-if="m.children && m.children.length > 0">
              <el-row v-for="(mc, key) in m.children" :key="key">
                <el-col :span="6">
                  <el-checkbox
                    :label="mc.me_id"
                    :value="mc.me_id"
                    @change="
                      handleCheckedCitiesChange($event, mc.me_id, m.me_id)
                    "
                    >{{ mc.me_name }}
                  </el-checkbox>
                </el-col>
                <el-col
                  :span="18"
                  v-if="resource[mc.me_id] && resource[mc.me_id].length > 0"
                >
                  <el-checkbox-group v-model="dataFrom.resourceModel">
                    <el-checkbox
                      v-for="(re, key) in resource[mc.me_id]"
                      :label="re.rm_resource"
                      :key="key"
                      :value="re.rm_resource"
                      @change="
                        handleCheckedCitiesResourceChange(
                          $event,
                          re.rm_resource,
                          mc.me_id,
                          m.me_id
                        )
                      "
                      >{{ re.re_name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit('dataFrom')"
          :loading="reloading"
          >提交</el-button
        >
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      id: this.$props.roleId,
      dataFrom: {},
      rules: {
        resource: [{ required: true, message: "请选择菜单", trigger: "blur" }],
      },
      listLoading: true,
      reloading: false,
      menu: [],
      resource: [],
      pathId: 0,
    };
  },
  props: {
    roleId: {
      type: Number,
    },
  },
  created() {
    if (
      this.userInfo.resources.detailsRole &&
      this.userInfo.resources.bindingRole
    ) {
      this.getRoleDetails();
    } else {
      this.$emit("bindingRole", false);
      this.$message.success("你没有此权限！");
    }
  },
  methods: {
    getRoleDetails() {
      this.$axios
        .post(this.userInfo.resources.detailsRole.api_path, {
          ro_id: this.id,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.dataFrom = res.data.data;
            this.pathId = this.dataFrom.ro_path;
            this.$set(this.dataFrom, "resource", []);
            this.$set(this.dataFrom, "resourceModel", []);
            if (this.dataFrom.ro_router != 0) {
              var resource = this.dataFrom.ro_router.split(",");
              for (var j = 0; j < Object.keys(resource).length; j++) {
                this.$set(this.dataFrom.resource, j, parseInt(resource[j]));
              }
            }
            if (this.dataFrom.ro_resourse != 0) {
              var resourceModel = this.dataFrom.ro_resourse.split(",");
              for (var j = 0; j < Object.keys(resourceModel).length; j++) {
                this.$set(
                  this.dataFrom.resourceModel,
                  j,
                  parseInt(resourceModel[j])
                );
              }
            }

            this.getMenuAll();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    getResourceAll() {
      this.$axios
        .post(this.$adminApi.searchResourceModelApi, {
          pathId: this.pathId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            var resource = res.data.data;
            for (var key in resource) {
              for (var j = 0; j < resource[key].length; j++) {
                this.$set(
                  resource[key][j],
                  "rm_resource",
                  parseInt(resource[key][j].re_id)
                );
              }
            }
            this.resource = resource;
          } else {
            this.$message.error(res.data.msg);
          }
          this.listLoading = false;
        });
    },
    getMenuAll() {
      this.$axios
        .post(this.$adminApi.searchMenuApi, {
          is_menu: 1,
          pathId: this.pathId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.menu = res.data.data;
            this.getResourceAll();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.reloading = true;
          this.dataFrom.ro_router = this.dataFrom.resource.join(",");
          this.dataFrom.ro_resourse = this.dataFrom.resourceModel.join(",");
          this.$axios
            .post(this.userInfo.resources.bindingRole.api_path, this.dataFrom)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.$emit("bindingRole", true);
              } else {
                this.$message.error(res.data.msg);
              }
              this.reloading = false;
            });
        } else {
          return false;
        }
      });
    },
    onCancel() {
      this.$emit("bindingRole", false);
    },
    handleCheckAllChange(val, id) {
      var son = this.menu[id].children;
      var res = this.resource;
      if (val) {
        if (son.length > 0) {
          for (var i = 0; i < son.length; i++) {
            this.$set(
              this.dataFrom.resource,
              this.dataFrom.resource.length,
              son[i].me_id
            );
            var menuId = son[i].me_id;
            if (res[menuId] && res[menuId].length > 0) {
              for (var j = 0; j < res[son[i].me_id].length; j++) {
                this.$set(
                  this.dataFrom.resourceModel,
                  this.dataFrom.resourceModel.length,
                  res[menuId][j].rm_resource
                );
              }
            }
          }
        }
      } else {
        if (son.length > 0) {
          if (this.dataFrom.resource.length == 0) {
            return false;
          } else {
            var newSon = [];
            for (var i = 0; i < son.length; i++) {
              this.$set(newSon, i, parseInt(son[i].me_id));
            }

            var resource = this.dataFrom.resource;
            var resourceModel = this.dataFrom.resourceModel;
            var data = [];
            var model = [];
            var num = 0;
            var num1 = 0;
            var num2 = 0;
            for (var i = 0; i < resource.length; i++) {
              if (newSon.indexOf(resource[i]) == -1) {
                this.$set(data, num, parseInt(resource[i]));
                num++;
              }
            }
            //获取所有的资源id
            var resourceAll = [];
            for (var i = 0; i < son.length; i++) {
              var menuId = son[i].me_id;
              if (res[menuId] && res[menuId].length > 0) {
                for (var j = 0; j < res[son[i].me_id].length; j++) {
                  this.$set(
                    resourceAll,
                    num1,
                    parseInt(res[son[i].me_id][j].rm_resource)
                  );
                  num1++;
                }
              }
            }
            for (var k = 0; k < resourceModel.length; k++) {
              if (resourceAll.indexOf(resourceModel[k]) == -1) {
                this.$set(model, num2, parseInt(resourceModel[k]));
                num2++;
              }
            }
            this.dataFrom.resource = data;
            this.dataFrom.resourceModel = model;
          }
        }
      }
    },
    handleCheckedCitiesChange(val, id, fid) {
      var res = this.resource[id];
      if (val) {
        if (this.dataFrom.resource.indexOf(fid) == -1) {
          this.$set(this.dataFrom.resource, this.dataFrom.resource.length, fid);
        }
        if (res && res.length > 0) {
          for (var i = 0; i < res.length; i++) {
            this.$set(
              this.dataFrom.resourceModel,
              this.dataFrom.resourceModel.length,
              res[i].rm_resource
            );
          }
        }
      } else {
        var son = this.menu[fid].children;
        var newRes = [];
        if (res && res.length > 0) {
          for (var i = 0; i < res.length; i++) {
            this.$set(newRes, i, parseInt(res[i].rm_resource));
          }
          var model = [];
          var num = 0;
          for (var i = 0; i < this.dataFrom.resourceModel.length; i++) {
            if (newRes.indexOf(this.dataFrom.resourceModel[i]) == -1) {
              this.$set(model, num, parseInt(this.dataFrom.resourceModel[i]));
              num++;
            }
          }
          this.dataFrom.resourceModel = model;
        }

        if (son.length > 0) {
          var is_fater = true;
          for (var i = 0; i < son.length; i++) {
            if (this.dataFrom.resource.indexOf(son[i].me_id) > -1) {
              is_fater = false;
            }
          }
          if (is_fater) {
            var resource = this.dataFrom.resource;
            var data = [];
            var num = 0;
            for (var j = 0; j < resource.length; j++) {
              if (resource[j] != fid) {
                this.$set(data, num, parseInt(resource[j]));
                num++;
              }
            }
            this.dataFrom.resource = data;
          }
        }
      }
    },
    handleCheckedCitiesResourceChange(val, id, fid, ffid) {
      if (val) {
        if (this.dataFrom.resource.indexOf(ffid) == -1) {
          this.$set(
            this.dataFrom.resource,
            this.dataFrom.resource.length,
            ffid
          );
        }
        if (this.dataFrom.resource.indexOf(fid) == -1) {
          this.$set(this.dataFrom.resource, this.dataFrom.resource.length, fid);
        }
      } else {
        var res = this.resource[fid];
        var resourceModel = this.dataFrom.resourceModel;
        if (res.length > 0) {
          var is_fater = true;
          for (var i = 0; i < res.length; i++) {
            if (resourceModel.indexOf(res[i].rm_resource) > -1) {
              is_fater = false;
            }
          }
          if (is_fater) {
            var data = [];
            var num = 0;
            for (var j = 0; j < this.dataFrom.resource.length; j++) {
              if (this.dataFrom.resource[j] != fid) {
                this.$set(data, num, this.dataFrom.resource[j]);
                num++;
              }
            }
            this.dataFrom.resource = data;
            this.handleCheckedCitiesChange(false, fid, ffid);
          }
        }
      }
    },
  },
};
</script>
<style scoped>
</style>